<template>
  <div class="CarouselContainer" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay">
    <div ref="mySwiper" class="swiper-container" :id="currentIndex">
      <div class="swiper-wrapper">
        <!-- 首页 -->
        <div class="swiper-slide my-swiper-slide">
          <ItemPage1/>
        </div>        
        
        <div class="swiper-slide my-swiper-slide">
          <ItemPage2/>
        </div>

        <div class="swiper-slide my-swiper-slide">
          <ItemPage3/>
        </div>

        <div class="swiper-slide my-swiper-slide">
          <ItemPage4/>
        </div>

        <div class="swiper-slide my-swiper-slide">
          <ItemPage5/>
        </div>

        <div class="swiper-slide my-swiper-slide">
          <ItemPage6/>
        </div>
        
        <div class="swiper-slide my-swiper-slide">
          <ItemPage7/>
        </div>

      </div>
      <!-- 分页器 -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>
<script>

  import ItemPage1 from './SwipItem/ItemPage1.vue'
  import ItemPage2 from './SwipItem/ItemPage2.vue'
  import ItemPage3 from './SwipItem/ItemPage3.vue'
  import ItemPage4 from './SwipItem/ItemPage4.vue'
  import ItemPage5 from './SwipItem/ItemPage5.vue'
  import ItemPage6 from './SwipItem/ItemPage6.vue'
  import ItemPage7 from './SwipItem/ItemPage7.vue'

import Swiper from 'swiper'
import "swiper/css/swiper.css";
export default {
  name: 'IndexPage',
  props: ['currentIndex'],
  components: {
    ItemPage1,
    ItemPage2,
    ItemPage3,
    ItemPage4,
    ItemPage5,
    ItemPage6,
    ItemPage7,
  
  },
  data() {
    return {
      currentSwiper: null,
    }
  },
  watch: {
    //slide数据发生变化时,更新swiper
    slideList: {
      deep: true,
      // eslint-disable-next-line
      handler(nv, ov) {
        console.log("数据更新了")
        this.updateSwiper()
      }
    }
  },
  mounted() {
    this.initSwiper()
  },
  methods: {
    CheckPage(index){
      this.currentSwiper.slideTo(index, 500, false)
    },
    //鼠标移入暂停自动播放
    stopAutoPlay() {
      //  this.currentSwiper.autoplay.stop()
    },
    //鼠标移出开始自动播放
    startAutoPlay() {
      // this.currentSwiper.autoplay.start()
    },
    //初始化swiper
    initSwiper() {
      // eslint-disable-next-line
      let vueComponent = this//获取vue组件实例
      //一个页面有多个swiper实例时，为了不互相影响,绑定容器用不同值或变量绑定
      this.currentSwiper = new Swiper('#' + this.currentIndex, {
        direction: "vertical",
        mousewheel: true,
        initialSlide: 0,//默认展示
        // loop: true, // 循环模式选项
        autoHeight: 'true',//开启自适应高度,容器高度由slide高度决定
        //分页器
        pagination: {
          el: '.swiper-pagination',
        },
        on: {
          //此处this为swiper实例
          //切换结束获取slide真实下标
          slideChangeTransitionEnd: function () {
            console.log(vueComponent.$props.currentIndex + "号swiper实例真实下标", this.realIndex)

            vueComponent.$emit('checkpage', this.realIndex)
          },
          //绑定点击事件,解决loop:true时事件丢失
          // eslint-disable-next-line
          click: function (event) {
            console.log("你点击了" + vueComponent.$props.currentIndex + "号swiper组件")
          },
          transitionEnd: function () {
            // if (this.realIndex == 0) {
            //   vueComponent.$refs.homeComponent.addAnimate();
            // } else {
            //   vueComponent.$refs.homeComponent.removeAnimate();
            // }
            
          }
        },
        // autoplay: {
        //   //自动播放,不同版本配置方式不同
        //   delay: 3000,
        //   stopOnLastSlide: false,
        //   disableOnInteraction: false
        // },

      })

    },

    //销毁swiper
    destroySwiper() {
      try {
        this.currentSwiper.destroy(true, false)
      } catch (e) {
        console.log("删除轮播")
      }
    },
    //更新swiper
    updateSwiper() {
      this.destroySwiper()
      this.$nextTick(() => {
        this.initSwiper()
      })
    },
    slideTo(index) {
      this.currentSwiper.slideTo(index, 500, false)
    }
  },

}
</script>
<style scoped>
.CarouselContainer {
  width: 100%;
  height: 100vh;
  /*background-color: gray;*/
}

/*slide样式*/
.my-swiper-slide {
  /*height: 300px;
    /*background-color: pink;*/
}

/*swiper容器样式*/
.swiper-container {
  width: 100%;
  height: 100%;
  /*width: 700px;
    border: 1px solid red;*/
}

/*自定义分页器按钮被点击选中时的样式*/
/deep/.swiper-pagination-bullet-active {
  /*background-color: #d5a72f !important;
    width: 20px;*/
}

/*自定义分页器按钮常规样式*/
/deep/.swiper-pagination-bullet {
  /* background-color: #9624bf;
    opacity: 1;
    width: 20px;*/
}
</style>
